<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { info_api } from "@/package/other/api/guider_realize_value";

import PageSticky from "@/components/page/sticky.vue";

onLoad((options) => {
  useQuery<{ id: string; title: string }>(
    options as MiniApp.AppLaunchOption,
    (query) => {
      info_api({ id: query.id }).then((resp) => {
        infoData.title = resp.info.title;
        infoData.date = resp.info.cdate;
        infoData.content = resp.info.source_content.replace(
          /\<img/gi,
          '<img class="detail-html-img" '
        );

        shareOption.title = resp.info.title;
      });
      infoData.title = query.title || "";

      shareOption.data = { id: query.id, title: query.title };
    }
  );
});

const infoData = reactive({ title: "", date: "", content: "" });

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/other/pages/news/detail"
);
</script>

<template>
  <PageSticky>
    <view class="detail-info">
      <view class="detail-info-title">{{ infoData.title }}</view>
      <view class="detail-info-date">{{ infoData.date }}</view>
    </view>
  </PageSticky>

  <view class="detail-html">
    <view class="detail-html-content">
      <rich-text :nodes="infoData.content" />
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}

.detail-info {
  padding: 30rpx 30rpx 20rpx;

  .detail-info-title {
    margin-bottom: 20rpx;
    font-size: 40rpx;
    color: #333333;
    line-height: 56rpx;
    font-weight: bold;
  }

  .detail-info-date {
    font-size: 22rpx;
    color: #999999;
    line-height: 32rpx;
  }
}

.detail-html {
  padding: 20rpx 30rpx;

  .detail-html-content {
    font-size: 30rpx;
    color: #333333;
    line-height: 60rpx;
    overflow: hidden;
  }

  .detail-html-img {
    width: 100%;
  }
}
</style>